<template>
  <div class="x-container">
    <div class="x-main">
      <ul style="list-style:none">
        <li style="margin-bottom: 60px;">
          <div class="x-header">规划设计与预算编制信息</div>
          <div class="x-title">
            <span>规划设计与预算编制单位：</span>
            <span>{{companyName}}</span>
          </div>
          <div class="x-content">
            <!-- 1 -->
            <el-form
              label-width="80px"
              label-position="left"
              :model="formData"
              ref="formData"
              :rules="formDataRules"
            >
              <el-form-item label="起止时间" prop="dateTime">
                <el-date-picker
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  v-model="formData.dateTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :readonly="isCurrentProcess"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </li>
        <li style="margin-bottom: 60px;">
          <div class="x-header">投资来源信息</div>
          <div class="x-content">
            <!-- 2 -->
            <el-form label-width="160px" label-position="right" :model="formData">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="中央分配的新增费资金" prop="investCenterDistributedCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investCenterDistributedCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="地方留成新增资金" label-width="200px" prop="investLocalRetainCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investLocalRetainCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="耕地开垦费" prop="investFarmlandReclaimCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investFarmlandReclaimCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="自行补充耕地资金" prop="investLandSupplyCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investLandSupplyCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="用于农业开发的土地出让收入"
                    label-width="200px"
                    prop="investLandDevelopFee"
                  >
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investLandDevelopFee"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="土地复垦费" prop="investLandReclaimCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investLandReclaimCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="土地复垦义务人投资" prop="investReclaimObligorFee">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investReclaimObligorFee"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="其他资金" label-width="200px" prop="investOtherFee">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.investOtherFee"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </li>
        <li style="margin-bottom: 60px;">
          <div class="x-header">各大工程投资情况</div>
          <div class="x-content">
            <!-- 3 -->
            <el-form label-width="130px" :model="formData">
              <el-form-item label="工程施工费">
                <el-form
                  style="padding-top:20px"
                  label-width="120px"
                  label-position="right"
                  :model="formData"
                >
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="田间道路工程费" prop="projectRoadCost">
                        <el-input
                          style="width:180px"
                          type="number"
                          v-model="formData.projectRoadCost"
                          :min="0"
                          :readonly="isCurrentProcess"
                        >
                          <i slot="suffix">万元</i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="土地平整工程费" prop="projectLandLevelCost">
                        <el-input
                          style="width:180px"
                          type="number"
                          v-model="formData.projectLandLevelCost"
                          :min="0"
                          :readonly="isCurrentProcess"
                        >
                          <i slot="suffix">万元</i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="农田水利工程费" prop="projectWaterWorksCost">
                        <el-input
                          style="width:180px"
                          type="number"
                          v-model="formData.projectWaterWorksCost"
                          :min="0"
                          :readonly="isCurrentProcess"
                        >
                          <i slot="suffix">万元</i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="生态保护工程费" prop="projectEcoProtectCost">
                        <el-input
                          style="width:180px"
                          type="number"
                          v-model="formData.projectEcoProtectCost"
                          :min="0"
                          :readonly="isCurrentProcess"
                        >
                          <i slot="suffix">万元</i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="其他施工费" prop="projectOtherConstrCost">
                        <el-input
                          style="width:180px"
                          type="number"
                          v-model="formData.projectOtherConstrCost"
                          :min="0"
                          :readonly="isCurrentProcess"
                        >
                          <i slot="suffix">万元</i>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-form-item>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="设备购置费" prop="projectEquipmentCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.projectEquipmentCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="不可预见费用" prop="projectUnpredictableCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.projectUnpredictableCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="项目建设亩均投资" prop="projectInvestmentPerMu">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.projectInvestmentPerMu"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="新增耕地亩均投资" prop="projectInvestmentFarmlandPerMu">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.projectInvestmentFarmlandPerMu"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="其他费用" prop="projectOtherCost">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.projectOtherCost"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="工程总投资" prop="projectTotalInvestment">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.projectTotalInvestment"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">万元</i>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </li>
        <li style="margin-bottom: 60px;">
          <div class="x-header">建设信息</div>
          <div class="x-content">
            <!-- 4 -->
            <el-form label-width="200px" label-position="right" :model="formData">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="预计建设总规模" prop="constrPredictTotalArea">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictTotalArea"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计整理规模" prop="constrPredictOrganizeArea">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictOrganizeArea"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计开发规模" prop="constrPredictDevelopArea">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictDevelopArea"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计复垦规模" prop="constrPredictReclaimArea">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictReclaimArea"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计新增耕地总面积" prop="constrPredictNewFarmland">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictNewFarmland"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计新增整理耕地面积" prop="constrPredictOrganizeFarmland">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictOrganizeFarmland"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计新增开发耕地面积" prop="constrPredictDevelopFarmland">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictDevelopFarmland"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计新增复垦耕地面积" prop="constrPredictReclaimFarmland">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictReclaimFarmland"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计基本农田整理规模" prop="constrFarmlandDevelopArea">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrFarmlandDevelopArea"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计可用与占补平衡面积" prop="constrPredictMeetArea">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrPredictMeetArea"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计建成高标准基本农田规模" prop="constrHighLevelFarmland">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrHighLevelFarmland"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="灾毁耕地面积" prop="constrFarmlandRuined">
                    <el-input
                      style="width:180px"
                      type="number"
                      v-model="formData.constrFarmlandRuined"
                      :min="0"
                      :readonly="isCurrentProcess"
                    >
                      <i slot="suffix">公顷</i>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </li>
        <li style="margin-bottom: 60px;">
          <div class="x-header">
            <span style="display: inline-block;margin-right: 30px;">主要建设内容</span>
            <div style="display: flex; margin-top: 20px;" v-if="!isCurrentProcess">
              <el-button
                style="margin-right: 20px; height: 32px;"
                type="primary"
                @click="handleDownloadTemp1"
                size="mini"
              >模板下载</el-button>
              <el-upload
                :headers="{authorization: token}"
                :action="uploadUrl1"
                :on-success="handleUpload"
                ref="uploadProgram"
                :disabled="isCurrentProcess"
                accept=".xlsx"
              >
                <el-button size="small" type="primary">工程量导入</el-button>
              </el-upload>
            </div>
          </div>
          <div class="x-table">
            <el-table :data="formData.quantities" style="width:60%">
              <el-table-column type="index" label="序号" width="60"></el-table-column>
              <el-table-column prop="constrType" label="工程类型" align="center"></el-table-column>
              <el-table-column prop="constrName" label="工程名称" align="center"></el-table-column>
              <el-table-column prop="constrSize" label="规格" align="center"></el-table-column>
              <el-table-column prop="num" label="数量" align="center"></el-table-column>
              <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            </el-table>
          </div>
        </li>
        <li style="margin-bottom: 60px;">
          <div class="x-header">附件信息</div>
          <div cjlass="x-content">
            <el-form label-width="200px">
              <el-form-item label="规划设计与实施方案成果模板: " v-if="!isCurrentProcess">
                <el-button type="primary" size="small" @click="handleDownloadTemp">点击下载</el-button>
              </el-form-item>
              <el-form-item label="规划设计与实施方案成果:">
                <div style="width:300px">
                  <el-upload
                    :action="uploadUrl2"
                    :headers="{authorization: token}"
                    :on-success="handleUploadSuccess"
                    :limit="1"
                    accept=".zip"
                    ref="uploadFile"
                    :disabled="isCurrentProcess"
                    v-if="!isCurrentProcess"
                  >
                    <el-button type="primary" size="small">点击上传</el-button>
                  </el-upload>
                  <div class="viewDocment" v-if="isCurrentProcess">
                    <seeFujian
                      v-if="formData.zipFile"
                      @openPdf="seePdf"
                      download="1"
                      :file-name="formData.zipFile | backFileName"
                      :file-url="formData.zipFile | backFilePath(baseUrl)"
                    />
                    <!-- <span><i class="el-icon-document"/>{{formData.zipFile | backFileName}}</span>
                    <a :href="formData.zipFile | backFilePath(baseUrl)" style="color: rgb(64, 158, 255);margin-left:5px">下载</a>-->
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </li>
      </ul>
      <div class="x-footer">
        <el-button type="primary" @click="handleSubmit" v-if="!isCurrentProcess">提交</el-button>
        <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/config/index.js";
import { getToken } from "@/utils/auth";
import {
  submitData,
  getCompany,
  getDetail
} from "@/api/plannDesignBudget/resultsEntry.js";
import moment from "moment";
import { validateDatetimeRange } from "@/utils/validate.js";
import seeFujian from "@/components/seeFujian";
export default {
  components: {
    seeFujian
  },
  data() {
    return {
      projectId: localStorage.getItem("projectId") * 1,
      formData: {
        projectId: localStorage.getItem("projectId") * 1,
        dateTime: [],
        quantities: [],
        resultFileId: "",
        // 投资来源信息
        investCenterDistributedCost: 0,
        investLocalRetainCost: 0,
        investFarmlandReclaimCost: 0,
        investLandSupplyCost: 0,
        investLandDevelopFee: 0,
        investLandReclaimCost: 0,
        investReclaimObligorFee: 0,
        investOtherFee: 0,
        // 各大工程投资情况
        projectRoadCost: 0,
        projectLandLevelCost: 0,
        projectWaterWorksCost: 0,
        projectEcoProtectCost: 0,
        projectOtherConstrCost: 0,
        projectEquipmentCost: 0,
        projectUnpredictableCost: 0,
        projectInvestmentPerMu: 0,
        projectInvestmentFarmlandPerMu: 0,
        projectOtherCost: 0,
        projectTotalInvestment: 0,
        // 建设信息
        constrPredictTotalArea: 0,
        constrPredictOrganizeArea: 0,
        constrPredictDevelopArea: 0,
        constrPredictReclaimArea: 0,
        constrPredictNewFarmland: 0,
        constrPredictOrganizeFarmland: 0,
        constrPredictDevelopFarmland: 0,
        constrPredictReclaimFarmland: 0,
        constrFarmlandDevelopArea: 0,
        constrPredictMeetArea: 0,
        constrHighLevelFarmland: 0,
        constrFarmlandRuined: 0
      },
      formDataRules: {
        dateTime: [{ validator: validateDatetimeRange }]
      },
      baseUrl: config.baseUrl,
      uploadUrl: config.uploadUrl, //上传接口
      uploadUrl1:
        config.baseUrl + "/renovation/planningBudget/result/quantities/import", //工程量导入
      uploadUrl2: config.baseUrl + "/renovation/planningBudget/result/upload", //上传成果压缩包
      token: getToken(),
      companyName: ""
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_MEDIUM_ENTRY";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  filters: {
    backFileName: function(data) {
      if (data) {
        return data.fileName;
      } else {
        return "";
      }
    },
    backFilePath: function(data, baseUrl) {
      if (data) {
        return baseUrl + data.filePath;
      } else {
        return "";
      }
    }
  },
  created() {
    this.getCompany();
    this.getDetail();
  },
  methods: {
    handleDownloadTemp: function() {
      //下载规划设计与实施方案成果模板
      let a = document.createElement("a");
      a.href =
        config.baseUrl +
        "/renovation/templatefile/规划设计与实施方案上传数据.zip";
      a.click();
    },
    handleDownloadTemp1: function() {
      //下载工程量导入模板
      let a = document.createElement("a");
      a.href = config.baseUrl + "/renovation/templatefile/工程量录入模板.xlsx";
      a.click();
    },
    handleUploadSuccess: function(res, file, filelist) {
      //规划设计与实施方案成果上传
      if (res.data.successData) {
        this.formData.resultFileId = res.data.successData.zipFileId;
      } else {
        this.$refs["uploadFile"].clearFiles();
        let errorFiles = res.data.failData
          .map((item, index) => {
            return index + 1 + "." + item.fileName;
          })
          .join("。");
        this.$confirm(
          `存在以下文件错误（${errorFiles}）,请重新修改后上传`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error"
          }
        );
      }
    },
    handleUpload(res, file, fileList) {
      //工程量导入
      this.formData.quantities = res.data;
    },
    handleSubmit: function() {
      //提交数据按钮
      if (!(this.formData.quantities && this.formData.quantities.length > 0)) {
        this.$message({
          type: "error",
          message: "请上传工程量导入文件！",
          offset: 80
        });
        return;
      }
      if (!this.formData.resultFileId) {
        this.$message({
          type: "error",
          message: "请上传规划设计与实施方案成果文件！",
          offset: 80
        });
        return;
      }

      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.formData.startDate = this.formData.dateTime[0];
          this.formData.endDate = this.formData.dateTime[1];
          for (const i in this.formData) {
            if (
              i !== "dateTime" &&
              i !== "startDate" &&
              i !== "endDate" &&
              i !== "quantities"
            ) {
              this.formData[i] = this.formData[i] * 1;
            }
          }
          submitData(this.formData)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功！",
                type: "success"
              });
              this.$router.push("/projectManagement/planningStage/dealwith");
            })
            .catch(res => {
              loading.close();
            });
        }
      });
    },
    getCompany() {
      //获取已选单位
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getCompany({ projectId: this.projectId })
        .then(res => {
          loading.close();
          this.formData.companyId = res.data.id;
          this.companyName = res.data.name;
        })
        .catch(res => {
          loading.close();
        });
    },
    getDetail() {
      //获取页面数据
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getDetail({ projectId: this.projectId })
        .then(res => {
          loading.close();
          if (res.data) {
            this.formData = res.data;
            if (this.formData.startDate && this.formData.endDate) {
              this.formData.dateTime = [
                this.formData.startDate,
                this.formData.endDate
              ];
            }
          }
          console.log(this.formData);
        })
        .catch(res => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.x-container /deep/ .el-form-item {
  margin-bottom: 22px;
}
</style>

<style scoped="scoped" lang="scss">
.x-container {
  width: 100%;
  min-height: calc(100vh - 114px);
  padding: 20px;
  background: rgba(247, 248, 250, 1);
  .x-main {
    padding: 20px;
    background-color: #fff;
    .x-header {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 25px;
      color: rgba(77, 77, 77, 1);
      margin-bottom: 30px;
    }
    .x-title {
      margin-bottom: 20px;
    }
    .x-title > span:first-child {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: rgba(102, 102, 102, 1);
    }
    .x-title > span:last-child {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: rgba(153, 153, 153, 1);
    }
  }
}
</style>
